﻿@model Easy.CMS.Common.ViewModels.LayoutZonesViewModel
@{
    Layout = null;
    string returnUrl = Url.Action("Index", "Page", new { module = "Common", PageID = Model.PageID });

    var noZoneWidgets = Model.Widgets.Where(m => Model.Zones.All(n => n.ID != m.ZoneID));
    var zoneStart = false;
}

@if (noZoneWidgets.Any())
{
    <div class="panel panel-danger">
        <div class="panel-heading">
            <span class="badge">须要处理</span>
        </div>
        <div class="panel-body">
            <ul id="noZoneWidgets" class="fullRowList">
                @foreach (var widget in noZoneWidgets.OrderBy(m => m.Position))
                {
                    <li id="widget_@widget.ID" class="@(widget.LayoutID.IsNullOrEmpty() ? "widget-design" : "")" data-widgetid="@widget.ID">
                        @if (widget.LayoutID.IsNullOrEmpty())
                        {
                            <a href="@Url.Action("Edit", "Widget", new { module = "Common", ID = widget.ID, ReturnUrl = returnUrl })"><i class="glyphicon glyphicon-edit"></i></a>
                            <a href="javascript:void(0)" class="delete" data-widgetid="@widget.ID"><i class="glyphicon glyphicon-trash"></i></a>
                        }
                        else
                        {
                            <span class="badge">布局</span>
                        }
                        @widget.WidgetName
                    </li>
                }
            </ul>
        </div>
        <div class="panel-footer">
            <span class="description">
                组件不能正确地显示在页面中，可能是因为您切换了布局或删除了原先的区域
            </span>
        </div>
    </div>
}

<div class="panel panel-primary">
    <div class="panel-heading">
        页面概览
    </div>
    <div class="panel-body simplePreview">
        <div class="container-fluid simpleDesign">
            @foreach (var itemHtml in Model.LayoutHtml)
            {
                if (itemHtml.Html == Easy.Web.CMS.Zone.ZoneEntity.ZoneTag)
                {
                    @Html.Raw(itemHtml.Html)
                    zoneStart = true;
                    continue;
                }
                if (zoneStart)
                {
                    var zone = Model.Zones.Where(m => m.ID == itemHtml.Html);
                    if (zone.Any())
                    {
                        zoneStart = false;

                        foreach (var item in zone)
                        {
                            <div class="panel panel-info">
                                <div class="panel-heading">
                                    <span class="badge">@item.ZoneName</span>
                                    <a class="btn btn-link btn-xs" href="@Url.Action("SelectWidget", "WidgetTemplate", new { module = "Common", PageID = Model.PageID, ZoneID = item.ID, ReturnUrl = returnUrl })">
                                        <i class="glyphicon glyphicon-plus"></i>
                                        添加组件
                                    </a>
                                    <div class="clearfix"></div>
                                </div>
                                <div class="panel-body">
                                    <ul data-zoneid="@item.ID" class="fullRowList widgets">
                                        @foreach (var widget in Model.Widgets.Where(m => m.ZoneID == item.ID).OrderBy(m => m.Position).ThenBy(m => m.WidgetName))
                                        {
                                            <li id="widget_@widget.ID" class="@(widget.LayoutID.IsNullOrEmpty() ? "widget" : "")" data-widgetid="@widget.ID">
                                                @if (widget.LayoutID.IsNullOrEmpty())
                                                {
                                                    <a href="@Url.Action("Edit", "Widget", new { module = "Common", ID = widget.ID, ReturnUrl = returnUrl })"><i class="glyphicon glyphicon-edit"></i></a>
                                                    <a href="javascript:void(0)" class="delete" data-widgetid="@widget.ID"><i class="glyphicon glyphicon-trash"></i></a>
                                                }
                                                else
                                                {
                                                    <span class="badge">布局</span>
                                                }
                                                @widget.WidgetName
                                            </li>
                                        }
                                    </ul>
                                </div>
                            </div>
                        }

                        continue;
                    }
                }
                if (itemHtml.Html == Easy.Web.CMS.Zone.ZoneEntity.ZoneEndTag)
                {
                    @Html.Raw(itemHtml.Html)
                    zoneStart = false;
                    continue;
                }
                @Html.Raw(itemHtml.Html)
            }
        </div>
    </div>
    <div class="panel-footer">
        <a class="btn btn-primary btn-sm" href="@Url.Action("RedirectView", "Page", new { module = "Common", ID = Model.PageID })">
            <i class="glyphicon glyphicon-search"></i>
            预览
        </a>
        <a class="btn btn-primary btn-sm" href="@Url.Action("Design", new {ID = Model.PageID})">
            <i class="glyphicon glyphicon-wrench"></i>
            设计
        </a>
        <a class="btn btn-primary btn-sm" href="@Url.Action("Design", "Layout", new { module = "Common", ID = Model.LayoutID, PageID = Model.PageID })">
            <i class="glyphicon glyphicon-th-list"></i>
            布局
        </a>
    </div>
</div>


<script type="text/javascript">
    $("#noZoneWidgets>.widget").draggable({ revert: "invalid" });
    $(".fullRowList.widgets").sortable({
        placeholder: "sorting",
        stop: function (event, ui) {
            var tempForm = "";
            ui.item.parent().children().each(function (i, ui) {
                tempForm += "&widgets[" + i + "].ID=" + $(ui).data("widgetid") + "&widgets[" + i + "].Position=" + (i + 1);
            });
            if (tempForm) {
                $.post("@Url.Action("SaveWidgetPosition", "Widget", new { module="Common"})", tempForm, function (data) {

                }, "html");
            }
        }
    }).droppable({
        hoverClass: "droping",
        accept: ".widget",
        greedy: true,
        tolerance: "pointer",
        drop: function (event, ui) {
            if (ui.draggable.parent().data("zoneid") == $(this).data("zoneid")) {
                return true;
            }
            var target = ui.draggable.clone();
            target.removeAttr("style");
            $(this).append(target);
            ui.draggable.remove();
            $.post("@Url.Action("SaveWidgetZone", "Widget", new { module="Common" })",
                {
                    ID: target.data("widgetid"),
                    ZoneId: $(this).data("zoneid"),
                    Position: $(this).children().size()
                },
                function (data) {

                }, "html");
        }
    });
</script>